<template>
  <div class="credits app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="">
        <el-input v-model="queryParams.id" placeholder="担保编号" clearable style="width: 100px" />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="queryParams.phone" placeholder="姓名/手机号" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item label="" prop="jobGroup"> <el-input v-model="queryParams.code" placeholder="合同号" clearable style="width: 150px" /> </el-form-item>
      <el-form-item label="" prop="jobGroup">
        <el-select v-model="queryParams.type" placeholder="担保类型" clearable style="width: 100px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="status">
        <el-date-picker v-model="queryParams.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 260px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"> 搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain @click="handleExport" v-hasPermi="['monitor:job:export']"
          ><el-icon><Upload /></el-icon> 导出</el-button
        >
      </el-col>
    </el-row> -->

    <el-table v-loading="loading" :data="state.jobList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="30" />
      <el-table-column label="编号" align="center" prop="id" width="50" />
      <el-table-column label="姓名" align="center" prop="user_name" :show-overflow-tooltip="true" />
      <el-table-column label="合同号" align="center" prop="contract_code"> </el-table-column>
      <el-table-column label="申请日期" align="center" prop="create_time" :show-overflow-tooltip="true" />
      <el-table-column label="申请额度" align="center" prop="apply_quota" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.apply_quota }}元</div>
        </template></el-table-column
      >
      <el-table-column label="审批金额" align="center" prop="approval_amount" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.approval_amount == "" ? scope.row.apply_quota : scope.row.approval_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="合同金额" align="center" prop="contract_amount" :show-overflow-tooltip="true" />
      <el-table-column label="担保期限" align="center" prop="loan_stages" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.loan_stages }}个月</div>
        </template></el-table-column
      >
      <el-table-column label="担保类型" align="center" prop="loan_type" :show-overflow-tooltip="true">
        <template #default="scope" v-if="active != 3">
          <div>{{ loanTypes(scope.row.loan_type) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ methodType(scope.row.method) }}</div>
        </template></el-table-column
      >
      <el-table-column label="放款时间" align="center" prop="loan_time" :show-overflow-tooltip="true" />
      <el-table-column label="放款通道" align="center" prop="aisle" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <div>{{ statusType(scope.row.status) }}</div>
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">审批放款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
  </div>
</template>

<script setup name="Job">
import { loanApprovaltList } from "@/api/loanBefore";
import Crontab from "@/components/Crontab";
import { statusType, loanTypes, auditResult, auditType, methodType } from "@/utils/dict";
const router = useRouter();
const { proxy } = getCurrentInstance();
import { formatDate } from "@/utils/index.js";
const state = reactive({
  jobList: [],
});
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const value2 = ref("");
const props = defineProps({
  active: {
    type: String,
  },
});
const data = reactive({
  form: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    name: "", //姓名
    phone: "", //电话
    status: "0", //状态
    type: "", //类型
    time: "", //时间
    startTime: "", //开始时间
    endTime: "", //结束时间
  },
  preview: {
    open: false,
    title: "审核详情",
    data: {},
    activeName: "domain.java",
  },
  jobList: {},
});

const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
});

const { queryParams, form, rules, preview } = toRefs(data);

function handleClick(row) {
  console.log(row, "rowrowrow");
  router.push({
    path: "approve-contents",
    query: {
      appplyId: row.id,
    },
  });
}

const options = [
  {
    value: "1",
    label: "个人信用",
  },
  {
    value: "2",
    label: "个人分期",
  },
  {
    value: "3",
    label: "个人抵押",
  },
  {
    value: "4",
    label: "企业信用",
  },
  {
    value: "5",
    label: "企业分期",
  },
  {
    value: "6",
    label: "企业租赁",
  },
];

//弹窗审核结果转译
function DialogStatus(status) {
  switch (status) {
    case 1:
      return "通过";
    case 2:
      return "驳回";
    case 3:
      return "拒绝";
  }
}
//弹窗审核类型转译
function handelType(status) {
  switch (status) {
    case 1:
      return "初审";
    case 2:
      return "复审";
    case 3:
      return "终审";
  }
}

/** 查询任务列表 */
function getList() {
  loading.value = true;
  loanApprovaltList(queryParams.value).then((res) => {
    console.log(res, "放款审批");
    if (res.code == 200) {
      state.jobList = res.data.list;
      total.value = res.data.total_page;
      loading.value = false;
    }
    // console.log(res.list, "res.list");
  });
}
/** 任务组名字典翻译 */
function jobGroupFormat(row, column) {
  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    jobId: undefined,
    jobName: undefined,
    jobGroup: undefined,
    invokeTarget: undefined,
    cronExpression: undefined,
    misfirePolicy: 1,
    concurrent: 1,
    status: "0",
  };
  proxy.resetForm("jobRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  if (queryParams.value.time && queryParams.value.time.length > 0) {
    queryParams.value.startTime = formatDate(queryParams.value.time[0]);
    queryParams.value.endTime = formatDate(queryParams.value.time[1]);
  }
  queryParams.value.page_count = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
function lookover(e) {
  preview.value.open = true;
  console.log(e, "e", jobList.value[0].cronExpression);
}

// 更多操作触发
function handleCommand(command, row) {
  switch (command) {
    case "handleRun":
      handleRun(row);
      break;
    case "handleView":
      handleView(row);
      break;
    case "handleJobLog":
      handleJobLog(row);
      break;
    default:
      break;
  }
}
// 任务状态修改
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.jobName + '"任务吗?')
    .then(function () {
      return changeJobStatus(row.jobId, row.status);
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功");
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0";
    });
}
/* 立即执行一次 */
function handleRun(row) {
  proxy.$modal
    .confirm('确认要立即执行一次"' + row.jobName + '"任务吗?')
    .then(function () {
      return runJob(row.jobId, row.jobGroup);
    })
    .then(() => {
      proxy.$modal.msgSuccess("执行成功");
    })
    .catch(() => {});
}
/** 任务详细信息 */
function handleView(row) {
  getJob(row.jobId).then((response) => {
    form.value = response.data;
    openView.value = true;
  });
  router.push("detail");
}
/** cron表达式按钮操作 */
function handleShowCron() {
  expression.value = form.value.cronExpression;
  openCron.value = true;
}
/** 确定后回传值 */
function crontabFill(value) {
  form.value.cronExpression = value;
}
/** 任务日志列表查询 */
function handleJobLog(row) {
  const jobId = row.jobId || 0;
  router.push("/monitor/job-log/index/" + jobId);
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加任务";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const jobId = row.jobId || ids.value;
  getJob(jobId).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改任务";
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["jobRef"].validate((valid) => {
    if (valid) {
      if (form.value.jobId != undefined) {
        updateJob(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addJob(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const jobIds = row.jobId || ids.value;
  proxy.$modal
    .confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?')
    .then(function () {
      return delJob(jobIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "monitor/job/export",
    {
      ...queryParams.value,
    },
    `job_${new Date().getTime()}.xlsx`
  );
}

getList();
</script>
<style lang="scss" scoped>
.statusStyle {
  color: #ff0000;
}
:deep(.el-dialog) {
  height: 100px;
}
.pagination-container {
  height: 56px;
  margin-top: 15px;
}
</style>
